// 组件可以复用
//响应式的业务也可以复用
//loadMore hooks
//useRouter 是第三方提供的hooks函数
//我们也可以自定义hooks函数
//组件加hooks 函数式编程 让项目开发更快更简单
// @ts-ignore
import type {Ref} from "vue";
// @ts-ignore
import {onUnmounted, ref, watch} from "vue";
export const  useIntersectionObserver = (
    nodeRef: Ref<HTMLElement | null>,
    loadMore: () => void
) => {
    //IntersectionObserver实例() 联合数据类型
    let observer: IntersectionObserver | null = null
    // @ts-ignore
    watch(nodeRef, (newNodeRef, oldNodeRef) => {
        //取消监听旧节点 前提是存在Observer的实例对象
        if (oldNodeRef && observer) {
            observer.unobserve(oldNodeRef)
        }
        //监听新节点
        if (newNodeRef) {
            observer = new IntersectionObserver(([entry]) => {
                //解构获取第一个元素
                //isIntersecting 表示元素是否在视口内
                if (entry.isIntersecting) {

                    //触发加载更多的数据
                    loadMore()
                }
            })

            observer.observe(newNodeRef);
        }
    })
    //是否还有下一页
    const hasMore=ref(true)
    //组件卸载,取消监听
    onUnmounted(()=>{
        if (observer){
            observer.disconnect()
        }
    })
    //监听hasMore 变化
    // @ts-ignore
    watch(hasMore, (value)=> {
        if (observer) {
            if (value && nodeRef.value) {
                observer.observe(nodeRef.value)
            } else {
                observer.disconnect();
            }
        }
    })
    return {
        hasMore,
        setHasMore:(value:boolean)=>{
            hasMore.value=value;
        }
    }
}
